<template>
	<view class="customInput_box">
		<view class="page_A" v-if="!reslut">
			<view class="tip_box">
				<text class="text-A">不知道写什么？试试这个</text>
				<image src="/static/create/create_finger.png" mode=""></image>
				<text class="text-B" @click="remind">散文诗</text>
			</view>
			<view class="title">
				选择语气
				<text>*</text>
			</view>
			<view class="tone_box">
				<view class="toneList" v-for="(item, index) in toneList" :key="index">
					<u-tag :text="item.content" :plain="!item.checked" size="medium" shape="circle" plainFill="true"
						:name="index" @click="toneClick">
					</u-tag>
				</view>
			</view>
			<view class="title">
				想写点什么
				<text>*</text>
			</view>
			<view class="content">
				<u--textarea v-model="writing" maxlength="200" placeholder="猫咪 海鸥  大叔  海洋 天空" count height="441rpx">
				</u--textarea>
			</view>
			<view class="btn_box">
				<u-button :disabled="!writing.trim()" text="开始生成" shape='circle' size="large" color="#3FC698"
					@click="generate"></u-button>
			</view>
		</view>
		<view class="page_B" v-else>
			<view class="tip_box">
				共{{reslut.length}}字
			</view>
			<!-- <view class="title">
				{{keyword}}
			</view> -->
			<view class="content">
				<u--textarea v-model="reslut" maxlength="-1" height="441rpx">
				</u--textarea>
			</view>
			<view class="btn_box">
				<view class="btn" @click="continueBtn">
					<image src="/static/create/create_continue.png" mode=""></image>
					<text>续写</text>
				</view>
				<view class="btn" @click="rebuildBtn">
					<image src="/static/create/create_again.png" mode=""></image>
					<text>重新生成</text>
				</view>
				<view class="btn" @click="copyBtn">
					<image src="/static/create/create_copy.png" mode=""></image>
					<text>复制文本</text>
				</view>
			</view>
		</view>
		<u-modal :show="vipShow" :title="'温馨提示'" :content="content" cancelText="取消" confirmText="去开通"
			showCancelButton="true" @cancel="cancel" @confirm="govip" :closeOnClickOverlay="true"
			@close="vipShow = false"></u-modal>
	</view>
</template>

<script>
	import {
		isLogin,
		vipType
	} from '@/business/login.js';
	import {
		wycUrl
	} from '@/api/assemb.js'
	let app = getApp();
	export default {
		data() {
			return {
				isVip: false,
				vipShow: false,
				content: '您还不是会员,此功能需开通会员才可使用。',
				tone: '有说服力',
				writing: '',
				reslut: '',
				toneList: [{
						checked: true,
						content: '有说服力'
					},
					{
						checked: false,
						content: '正式得体'
					},
					{
						checked: false,
						content: '专业'
					},
					{
						checked: false,
						content: '幽默'
					},
					{
						checked: false,
						content: '热情'
					}
				]
			}
		},
		onShow() {

			// this.isVip = false;
		},
		onLoad() {
			this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
		},
		methods: {
			generate() {
				if (this.isVip) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					});
					let param = {
						"chatId": "123",
						"message": [{
							"role": "user",
							"content": `用${this.tone}的语气${this.writing}`
						}]
					}
					wycUrl(param, 1002, 'chat').then((res) => {
						console.log(res);
						this.reslut = res.data.data.choices[0].text.replace(/[\r\n]/g, '')
						uni.hideLoading();
					})
				} else {
					this.vipShow = true
				}
			},
			remind() {
				this.writing = '写一首散文诗，诗的内容中有小鸟、乡村。'
			},
			continueBtn() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let param = {
					"chatId": "123",
					"message": [{
						"role": "user",
						"content": `继续用${this.tone}的语气${this.writing}`
					}]
				}
				wycUrl(param, 1002, 'chat').then((res) => {
					console.log(res);
					this.reslut += res.data.data.choices[0].text.replace(/[\r\n]/g, '')
					uni.hideLoading();
				})
			},
			rebuildBtn() {
				this.reslut = ''
				this.writing = ''
			},
			copyBtn() {
				uni.setClipboardData({
					data: this.reslut,
					showToast: true
				});
			},
			toneClick(name) {
				this.toneList.map((item, index) => {
					item.checked = index === name ? true : false
				})
				this.tone = this.toneList[name].content
			},
			/**
			 * 跳转充值页面
			 */
			govip() {
				this.vipShow = false;
				if (uni.getStorageSync('OS') !== 'ios') {
					uni.navigateTo({
						url: '/pages/paymentCenter/paymentCenter'
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '由于相关规范，IOS功能暂不可用',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			cancel() {
				this.vipShow = false;
			}
		}
	}
</script>

<style lang="scss">
	.page_B {
		.tip_box {
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 100rpx;
			margin-left: 36rpx;
		}

		.title {
			font-size: 43rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 36rpx;
		}

		.content {
			margin: auto;
			margin-top: 27rpx;
			width: 694rpx;
			height: 441rpx;
			border-radius: 12rpx;
		}

		.btn_box {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			width: 100%;
			height: 158rpx;
			background: #fff;
			border: 1px solid #BFBFBF;
			padding-top: 42rpx;
			box-sizing: border-box;

			.btn {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #333333;
					line-height: 36rpx;
				}

				image {
					width: 46rpx;
					height: 46rpx;
				}
			}

		}
	}

	.page_A {
		.tone_box {
			display: flex;
			padding: 0 37rpx;
			margin-top: 10rpx;
			flex-wrap: wrap;

			.toneList {
				margin-right: 20px;
				margin-top: 21rpx;
			}
		}

		.btn_box {
			position: absolute;
			left: 10%;
			bottom: 226rpx;
			width: 80%;
			height: 91rpx;
		}



		.content {
			margin: auto;
			margin-top: 27rpx;
			width: 694rpx;
			height: 441rpx;
			border-radius: 12rpx;
		}

		.title {
			margin-top: 38rpx;
			margin-left: 37rpx;
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;

			text {
				color: red;
				margin: 0 10rpx;
			}
		}

		.tip_box {
			width: 100%;
			height: 74rpx;
			background: #F7F7F7;
			padding: 0 38rpx;
			box-sizing: border-box;

			image {
				width: 33.82rpx;
				height: 25.97rpx;
				margin: 0 10rpx;
			}

			.text-A {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 74rpx;
			}

			.text-B {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #22B573;
				line-height: 74rpx;
			}

			.aiPaintingDescriptor_box {
				position: relative;
			}
		}
	}

	/deep/.u-tag--primary {
		background-color: #4BB591 !important;
		border-width: 0rpx !important;
	}

	/deep/.u-tag--primary--plain {
		border-width: 0rpx !important;
	}

	/deep/.u-tag--primary--plain--fill {
		background-color: #F7F7F7 !important;
	}

	/deep/.u-tag__text--primary--plain {
		color: #333333 !important;

	}

	/deep/.u-textarea {
		background-color: #F7F7F7 !important;
	}

	/deep/.u-textarea__count {
		background-color: #F7F7F7 !important;
	}
</style>